<template>
	<view class="navigate-bar-container">
      <view class="navigate-item" v-for="(item, index) in navigationDataList" :key="index" @click="navigationItemClick(item)">
        <view class="navigate-item-container">
          <view class="navigate-item-img">
            <image class="item-img" :src="item.imgUrl"></image>
          </view>
          <view class="navigate-item-title">
            {{item.title}}
          </view>
        </view>
、      </view>
	</view>
</template>
<script setup lang="ts">
	import {ref, onUpdated} from 'vue'
	const props = defineProps({
    navigationData: Object
	});
	let current = ref(0);
	const navigationItemClick = (item)=>{
		console.info(item)
    uni.navigateTo({
      url:'/pages/cms/index',
    })
	}

  const navigationDataList = [
    {
      title: '新品专区',
      imgUrl: '/static/shop/demo/banner2.png',
      linkUrk: 'https://www.baidu.com/',
    },
    {
      title: '波轮洗衣机',
      imgUrl: '/static/shop/demo/banner2.png',
      linkUrk: 'https://www.baidu.com/',
    },
    {
      title: '烘干滚筒',
      imgUrl: '/static/shop/demo/banner2.png',
      linkUrk: 'https://www.baidu.com/',
    },
    {
      title: '终止品专区',
      imgUrl: '/static/shop/demo/banner2.png',
      linkUrk: 'https://www.baidu.com/',
    }
  ]
</script>
<style lang="scss" scoped>

.navigate-bar-container{
  width: 686rpx;
  margin-left: 32rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;

  display: grid;
  grid-template-columns: 170rpx 170rpx 170rpx 170rpx;
  grid-gap: 2rpx;

}
.navigate-item{
  width: 170rpx;
  height: 204rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .navigate-item-container{
    height: 156rpx;
  }

  .navigate-item-img{
    display: flex;
    justify-content: center;
    .item-img{
      width: 108rpx;
      height: 108rpx;
    }
  }
  .navigate-item-title{
    margin-top: 8rpx;
    font-family: PingFangSC-Regular;
    font-size: 26rpx;
    color: #323233;
    letter-spacing: 0;
    text-align: center;
    line-height: 40rpx;
    font-weight: 400;
  }
}
</style>